<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSRF Token -->
        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <style type="text/css">
            .no-error span {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <nav class="navbar navbar-default navbar-static-top">
                <div class="container">
                    <div class="navbar-header">

                        <!-- Branding Image -->
                        <a class="navbar-brand" href="{{ url('/') }}">
                            {{ config('app.name', 'Laravel') }}
                        </a>
                    </div>

                    <div class="collapse navbar-collapse" id="app-navbar-collapse">
                        <!-- Left Side Of Navbar -->
                        <ul class="nav navbar-nav">
                        </ul>

                        <!-- Right Side Of Navbar -->
                        <ul class="nav navbar-nav navbar-right">
                            <!-- Authentication Links -->
                        </ul>
                    </div>
                </div>
            </nav>

            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="panel panel-default">
                            <div class="panel-heading">Login</div>
                            <div class="panel-body">
                                <form class="form-horizontal">
                                    <div class="form-group has-error">
                                        <label for="email" class="col-md-4 control-label">Account</label>
                                        <div class="col-md-6">
                                            <input id="account" type="text" class="form-control" name="email" value=""
                                                   required autofocus>
                                            <span class="help-block"><strong>Please enter your account</strong></span>
                                        </div>
                                    </div>

                                    <div class="form-group has-error">
                                        <label for="password" class="col-md-4 control-label">Password</label>

                                        <div class="col-md-6">
                                            <input id="password" type="password" class="form-control" name="password"
                                                   required autofocus>

                                            <span class="help-block"><strong>Please enter your password</strong></span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-8 col-md-offset-4">
                                            <button id="login-btn" onclick="return false;" class="btn btn-primary">
                                                Login
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
        <script type="text/javascript">
            $(".document").ready(function () {

                $("#account").on("blur", function () {
                    var formItem = $("#account").closest(".form-group");
                    if ($("#account").val()) {
                        formItem.removeClass("has-error");
                        formItem.addClass("no-error");
                    } else {
                        formItem.addClass("has-error");
                        formItem.removeClass("no-error");
                    }
                });

                $("#password").on("blur", function () {
                    var formItem = $("#password").closest(".form-group");

                    if ($("#password").val()) {
                        formItem.removeClass("has-error");
                        formItem.addClass("no-error");
                    } else {
                        formItem.addClass("has-error");
                        formItem.removeClass("no-error");
                    }
                });

                $("#login-btn").on("click", function () {
                    var account = $("#account").val(),
                        password = $("#password").val(),
                        token = "{{ csrf_token() }}";

                    if (account && password) {
                        $.ajax({
                            url: "{{url("admin/login")}}",
                            type: "POST",
                            data: {account: account, password: password, _token: token},
                            success: function (res) {
                                if (res.status_code == "200") {
                                    window.location.href = res.data.redirect_href;
                                }
                            }
                        });
                    }
                });
            });
        </script>
    </body>
</html>
